<template>
    <div>
        <el-row class="section" gutter="10">
            <el-col :span="18" class="graph">
                <Graph></Graph>
            </el-col>
            <el-col :span="6" class="graph">
                <el-card class="box-card graph">
                    <div slot="header" class="clearfix">
                        <span>知识图谱多条件搜索</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <div class="search-box">
                        <GraphSearch></GraphSearch>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <div class="section">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>实体基本描述</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <el-row>
                    <el-col :span="6">
                        <img
                            src="../assets/images/Typhoon.jpg"
                            width="300px"
                            height="180px"
                            alt="实体图片"
                        />
                    </el-col>
                    <el-col :span="18">
                        <h5>台风 (气象学名词)</h5>
                        <p>
                            台风（英语：Typhoon），属于热带气旋的一种。热带气旋是发生在热带或副热带洋面上的低压涡旋，是一种强大而深厚的“热带天气系统”。我国把南海与西北太平洋的热带气旋按其底层中心附近最大平均风力（风速）大小划分为6个等级，其中风力达12级或以上的，统称为台风。
                            [1]
                            广义上而言，“台风”这个词并非一种热带气旋强度。将中心持续风速每秒17.2米或以上的热带气旋（包括世界气象组织定义中的热带风暴、强热带风暴和台风）均称台风。在非正式场合，“台风”甚至直接泛指热带气旋本身。当西北太平洋的热带气旋达到热带风暴的强度，名称由世界气象组织台风委员会的14个国家和地区提供。
                            [2]
                            据美国海军的联合台风警报中心统计，1959年至2004年间西北太平洋及南海海域的台风发生的个数与月份有关，平均每年有26.5个台风生成，出现最多台风的月份是公历8月，其次是7月和9月
                        </p>
                    </el-col>
                </el-row>
            </el-card>
        </div>

        <div class="section">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>实体基本属性</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <Table></Table>
            </el-card>
        </div>
    </div>
</template>

<script>
import Graph from "../components/Graph";
import GraphSearch from "../components/GraphSearch";
import Table from "../components/Table";

export default {
    name: "Search",
    components: {
        Graph: Graph,
        GraphSearch: GraphSearch,
        Table: Table
    }
};
</script>

<style scoped>
.section {
    padding: 10px;
}
.graph {
    height: 560px;
}
.search-box {
    padding: 0px;
}
</style>